<!DOCTYPE html>
<html>
	<head>
		<title>智能科学与技术岗位分析</title>
    <style>
      *{
        color: white;
      }
      .item{
        padding: 20px;
        text-align: center;
        height: 400px;
        margin-top: 20px;
      }
    </style>
    <script src="../static/js/echarts.min.js"></script>
	</head>
	<body style="background-image: url('../static/bgimg.png'); background-size: 100% 100%; background-repeat:no-repeat;background-position:center;background-attachment:fixed;">
		<h1 style="text-align:center" id="title"></h1>
    <div>
      <div style="width: 32%;display:inline-block;margin-left: 17%;">
        <div class="item" id="city_pie"></div>
        <div class="item" id="companySize_pie"></div>
        <div class="item" id="corporateType_pie"></div>
        <div class="item" id="diploma_pie"></div>
      </div>
      <div style="width: 49%;display:inline-block;">
        <div class="item" id="city_bar"></div>
        <div class="item" id="companySize_bar"></div>
        <div class="item" id="corporateType_bar"></div>
        <div class="item" id="diploma_bar"></div>
      </div>
    </div>
    <div style="margin-top: 30px;margin-bottom: 30px;position: fixed;bottom: 20px;left: 20px;">
      <a href="/index" style="margin-left:30px; font-size:20px;text-decoration:none;"><首页</a>
    </div>
	</body>
  <script>
    function pie_fun(id, title, data){
      var pie_table = echarts.init(document.getElementById(id));
        option = {
          title: {
            text: title,
            subtext: '图例',
            left: 'center',
            textStyle:{
			        color:"#fff"
		        }
          },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            orient: 'vertical',
            left: 'left',
            textStyle:{
		          color:"#fff"
		        }
          },
          series: [{
            name: '占比',
            type: 'pie',
            radius: '50%',
            data: data,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }]
        };
        pie_table.setOption(option);
    }

    function bar_fun(id ,title, data){
      var avg_monthlyPay = echarts.init(document.getElementById(id));
      option = {
        title: {
          text: title,
          textStyle:{
			      color:"#fff"
		      }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
            }
        },
        legend: {
          textStyle:{
			      color:"#fff"
		      }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
          textStyle:{
			      color:"#fff"
		      }
        },
        xAxis: {
          type: 'value',
          boundaryGap: [0, 0.01],
          textStyle:{
			      color:"#fff"
		      }
        },
        yAxis: {
          type: 'category',
          data: data.bar_name,
          textStyle:{
			      color:"#fff"
		      }
        },
        series: [
          {
            name: '月薪平均值',
            type: 'bar',
            data: data.bar_avg,
            textStyle:{
			        color:"#fff"
		        }
          },
          {
            name: '月薪中位数',
            type: 'bar',
            data: data.bar_med,
            textStyle:{
			        color:"#fff"
		        }
          }
        ]
      }
      avg_monthlyPay.setOption(option);
    }

    window.onload=function(){
      var url = window.location.href
      var address = url.split("chart")[0]
      var arg = url.split("=")[1] 
      document.getElementById("title").innerHTML = arg + "岗位分析"
      var xhr = new XMLHttpRequest()
      xhr.open("get", address+"data?msg="+arg)
      xhr.send();
      xhr.onreadystatechange = function () {
        if(xhr.readyState === 4 && xhr.status === 200) {
          var msg = JSON.parse(xhr.responseText);
          var pie = {}
          var bar = {}
          for (let key in msg) {
            pie[key] = []
            bar[key] = {
              bar_name: [],
              bar_avg: [],
              bar_med: [],
            }
            for(let i=0;i<msg[key].length;i++){
              pie_item = {
                value: msg[key][i].Proportion,
                name: msg[key][i].name
              }
              bar[key].bar_name.push(msg[key][i].name)
              bar[key].bar_avg.push(msg[key][i].avg_monthlyPay)
              bar[key].bar_med.push(msg[key][i].med_monthlyPay)
              pie[key].push(pie_item)
            }
          }
          console.log(bar)
          pie_title = ["岗位学历占比","岗位城市占比","岗位公司类型占比","岗位公司规模占比"]
          count = 0
          for (let key in pie){
            pie_fun(key+"_pie", pie_title[count], pie[key])
            count += 1
          }
          count = 0
          bar_title = ["学历","城市","公司类型","公司规模"]
          for (let key in bar){
            bar_fun(key+"_bar", bar_title[count], bar[key])
            count += 1
          }
        };
      }
    }
  </script>
</html>
